import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
// import {PowerColModel} from '../../../models/kdm-response-model'

@Component({
  selector: 'app-regional-splite-items',
  templateUrl: './regional-splite-items.component.html',
  styleUrls: ['./regional-splite-items.component.css']
})
export class RegionalSpliteItemsComponent implements OnInit,OnChanges {


  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {
    if(this.initData&&this.initData.hasOwnProperty('data')&&changes['initData']&&this.ymax){
      // this.initChart()
    }
  }

  ngOnInit() {
    // this.initChart();
  }

  @Input() initData:any
  @Input() itemName:any[]
  @Input() ymax:any
  public chartOptions

  public initChart() {

    this.chartOptions = {
      chart: {
        height: 100,
        // plotBorderWidth: null,
        // plotShadow: false,
        type: 'column',
        backgroundColor: 'transparent',
        // renderTo: ''
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: this.itemName,
        labels:{
          // style:{ "color": "#ccd6eb" },
          enabled:false
        },
      },
      yAxis: {
        max:Math.ceil(this.ymax),
        min:0,
        endOnTick: false,
        title: {
          text: this.initData.name,
          // style:{'color':'#ccd6eb'}
        },
        gridLineWidth: 0,
        labels:{
          // style:{ "color": "#ccd6eb" },
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td ><span style="color:{series.color};padding:0">●</span>{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          stacking:'normal',
          pointPadding: 0.1,
          borderWidth: 0
        }
      },
      series: [this.initData]
    }
  }

}
